<template>
  <div class="wrapper">
    <div class="success">
      <van-icon name="checked" size="100px" color="#FF2568" />
      <div class="text">订单已生成!</div>
    </div>

    <div class="btns flex-y">
      <van-button color="#FF2568" type="primary" size="large" @click="$router.push('/order/' + key)">查看订单</van-button>
      <van-button type="default" size="large" @click="$router.push('/')">返回首页</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'orderSuccess',
  data () {
    return {
      key: ''
    }
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  background: #F8F8F8;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.success {
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .text {
    color: #FF2568;
    font-size: 20px;
  }
}

.btns {
  gap: 10px;
  padding: 0 20px;
}
</style>